.GameInfo {
  width: 100%;
  height: 100%;
  overflow-y: auto;
  .thumb {
    display: block;
    width: 100%;
    filter: brightness(1);
    position: relative;
    height: fit-content;
    margin-bottom: -150px;
    min-height: 300px;

    .back {
      position: absolute;
      top: 30px;
      left: 30px;
      z-index: 2;
      cursor: pointer;
      width: 40px;
      height: 40px;
      border-radius: 6px;
      background-color: rgba(23, 23, 23, 0.404);
      display: flex;
      transition: 0.3s;
      &:hover {
        background-color: rgba(23, 23, 23, 0.6);
      }
      svg {
        margin: auto;
      }
    }
    img {
      width: 100%;
      height: auto;
    }
    @keyframes thumb-show-anim {
      0% {
        opacity: 0;
      }
      100% {
        opacity: 1;
      }
    }

    .mask {
      position: absolute;
      left: 0;
      width: 100%;
      height: 40%;
      bottom: 0;
      background: linear-gradient(
        180deg,
        rgba(0, 0, 0, 0) 0%,
        #1e202158 20%,
        #1e2021 100%
      );
    }
  }
  .startGame {
    width: 100%;
    background-color: rgba(33, 33, 33, 0.139);
    position: relative;
    backdrop-filter: blur(10px);
    z-index: 3;
    border-top: 1px solid rgba(255, 255, 255, 0.2);
    padding: 10px;
    display: flex;
    flex-direction: row;
    gap: 10px;
    opacity: 0;
    animation-delay: 0.3s;
    animation: thumb-show-anim 0.5s ease-in-out forwards;
    @keyframes start-game-show-anim {
      0% {
        opacity: 0;
      }
      100% {
        opacity: 1;
      }
    }
    .cover {
      width: 150px;
      height: 210px;
      overflow: hidden;
      border-radius: 5px;
      border: 1px solid rgba(255, 255, 255, 0.2);
      img {
        width: 100%;
        height: 100%;
        object-fit: cover;
      }
    }
    .btns {
      display: flex;
      align-items: center;
      gap: 10px;
    }
    .button {
      background-color: var(--primary-color);
      padding: 8px 20px;
      font-size: 19px;
      border-radius: 4px;
      cursor: pointer;
      font-weight: 100;
      transition: 0.3s;
      white-space: nowrap;
      width: 120px;
      text-align: center;
      user-select: none;
      border: 1px solid var(--primary-color);
      &:hover {
        filter: brightness(0.9);
      }
      &:active {
        transform: scale(0.9);
      }
      &.loading-state {
        color: transparent;
        position: relative;
        width: 40px;
        .loading,
        .loading > div {
          position: relative;
          -webkit-box-sizing: border-box;
          -moz-box-sizing: border-box;
          box-sizing: border-box;
        }

        .loading {
          display: block;
          font-size: 0;
          color: #000;
          position: absolute;
          left: 50%;
          top: 50%;
          transform: translate(-50%, -50%);
        }

        .loading.la-dark {
          color: #333;
        }

        .loading > div {
          display: inline-block;
          float: none;
          background-color: currentColor;
          border: 0 solid currentColor;
        }

        .loading {
          width: 32px;
          height: 32px;
        }

        .loading > div {
          position: absolute;
          top: 50%;
          left: 50%;
          border-radius: 100%;
        }

        .loading > div:first-child {
          position: absolute;
          width: 32px;
          height: 32px;
          background: transparent;
          border-style: solid;
          border-width: 2px;
          border-right-color: transparent;
          border-left-color: transparent;
          animation: ball-clip-rotate-pulse-rotate 1s
            cubic-bezier(0.09, 0.57, 0.49, 0.9) infinite;
        }

        .loading > div:last-child {
          width: 16px;
          height: 16px;
          animation: ball-clip-rotate-pulse-scale 1s
            cubic-bezier(0.09, 0.57, 0.49, 0.9) infinite;
        }

        @keyframes ball-clip-rotate-pulse-rotate {
          0% {
            transform: translate(-50%, -50%) rotate(0deg);
          }

          50% {
            transform: translate(-50%, -50%) rotate(180deg);
          }

          100% {
            transform: translate(-50%, -50%) rotate(360deg);
          }
        }

        @keyframes ball-clip-rotate-pulse-scale {
          0%,
          100% {
            opacity: 1;
            transform: translate(-50%, -50%) scale(1);
          }

          30% {
            opacity: 0.3;
            transform: translate(-50%, -50%) scale(0.15);
          }
        }
      }
    }
    .button-sold {
      background-color: #1e2021;
      border: 1px solid var(--primary-color);
      padding: 8px 20px;
      font-size: 19px;
      border-radius: 4px;
      cursor: pointer;
      font-weight: 100;
      transition: 0.3s;
      white-space: nowrap;
      width: 120px;
      text-align: center;
      user-select: none;
    }
    .right-content {
      display: flex;
      flex-direction: column;
      gap: 10px;
      .name {
        font-weight: bold;
        font-size: 18px;
      }
      .desc {
        font-size: 13px;
        color: #cfcfcf;
        flex: 1;
        overflow: hidden;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-line-clamp: 5;
        -webkit-box-orient: vertical;
      }
      .button {
        margin-top: auto;
      }
    }
  }

  .tabs {
    padding: 10px;
    margin: 0 auto;
    margin-top: 20px;
    display: flex;
    justify-content: center;
    flex-direction: column;
    .empty {
      display: block;
      text-align: center;
      margin: 20px auto;
      font-size: 14px;
      color: #999;
    }
    .preview-list {
      display: flex;
      gap: 10px;
      flex-wrap: wrap;

      .preview-item {
        height: var(--height);
        width: auto;
        --height: 250px;
        cursor: pointer;
        border: 1px solid rgba(181, 180, 180, 0.342);
        img {
          height: var(--height);
        }
        video {
          height: var(--height);
        }
      }
    }

    .btns {
      display: flex;
      gap: 10px;
      align-items: center;
      margin-left: auto;
      width: fit-content;
    }
  }
}
